import React, { useRef } from 'react';
import { View, Text, StyleSheet, Animated, TouchableOpacity } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';

import HomeScreen from '../pages/HomePage';
import SettingsScreen from '../pages/SettingPage';
import LoginForm from './LoginPage';
import { userIsLogin, userInfo } from "../store/index";
import { useDispatch, useStore } from 'react-redux';


// const Tab = createBottomTabNavigator();
const Tab = createMaterialBottomTabNavigator();


const animationconfig = {
  animation:'spring',
  config:{
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  }
}

function Layout({navigation}){
  const dispatch = useDispatch();
  async function isLogin(){
    let store = useStore();
    dispatch(userIsLogin());
    let token = store.getState().user.token
    console.log("token值为：",token,typeof(token),token.length);

    switch(token){
      case undefined: 
        console.log("token值为：undefined");
        navigation.navigate('login');
      case null:
        console.log("token值为：null");
        navigation.navigate('login');
      case "":
        console.log("token值为：空，长度为0");
        navigation.navigate('login');
      case " ":
        console.log("token值为：空 ' '");
        navigation.navigate('login');
    }
    // if((token== undefined) || (token==null) || (token="")){
    //   navigation.navigate('login');
    // }
  }


  isLogin();

  return (
    <View style={{flex:1,}}>
      <Tab.Navigator
        activeColor="#0552d6"
        shifting="true"
        labeled="false"
        screenOptions={({})=>({
          headerShown: false,
        })}
        >
          <Tab.Screen
            name="home"
            component={HomeScreen}
            options={{
              tabBarLabel: 'Home',
              tabBarIcon:({color}) =>(<MaterialIcons name='home' color={color} size={24} />),
            }}
          />
          <Tab.Screen 
            name="setting" 
            component={SettingsScreen}
            options={{
              tabBarLabel: 'Setting',
              tabBarIcon:({color}) => (<MaterialIcons name='settings' color={color} size={24} />),
            }}
          />
        </Tab.Navigator>
    </View>
  )
}


function Entrypages(){
  const Stack = createNativeStackNavigator();
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="hometab" component={Layout} options={{ headerShown: false,transitionSpec:{open:animationconfig,close:animationconfig} }} />
      <Stack.Screen name="login" component={LoginForm} options={{ headerShown: false }} />
    </Stack.Navigator>
  )
}


const styles=StyleSheet.create({
  layoutcontent:{
    height: '80%',
    width: '100%',
  },
  foot:{
    height: '100%',
    width: 300
  }
})

export default Entrypages;